<template>
  <view class="modal-view">
    <u-modal :width="width" @close="close" :showCancelButton="false" :showConfirmButton="false" :show="show"
      :title="title">
      <view class="top-right" @click="close">
        <text class="font-icon">&#xe64b;</text>
      </view>
      <view class="content-view">
        <view>
          <view></view>
          <view class="input-view">
            <text class="input-t">应投金额</text>
            <input class="input-i" style="color: #999;" :value="this.subData.recommendMoney" inputmode="decimal"
              disabled placeholder="请输入" />
          </view>
          <view class="input-view">
            <text class="input-t">实际投注金额</text>
            <input class="input-i" v-model="params.money" inputmode="decimal" placeholder="请输入" />
          </view>
        </view>
        <view class="modal-bottom">
          <view @click="close" class="bottom-but but-cel">取消</view>
          <view @click="subMit" class="bottom-but but-ok">确定</view>
        </view>
      </view>

    </u-modal>
  </view>
</template>
<script>
import { planList } from '@/common/api/home'
export default {
  props: {
    subData: {
      type: Object,
      default: () => { },
    },
    show: {
      type: Boolean,
      default: false,
    },
    type: {

      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },

    width: {
      type: String,
      default: '590rpx',
    },
  },
  data () {
    return {
      params: {
        money: null,

      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.params.money = this.subData.recommendMoney
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    subMit () {
      console.log(this.subData)
      let params = {
        ...this.params,
        id: this.subData.id
      }
      planList(`${this.type}-child-submit`, params).then(res => {
        console.log(res)
        this.$emit('refresh')
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.content-view {
  display: flex;
  flex-direction: column;
}

.input-view {
  display: flex;
  height: 88rpx;
  align-items: center;
  margin: 20rpx 0;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 24rpx;

  .input-t {
    color: #131415;
    width: 190rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }

  .input-i {
    flex: 1;
    font-size: 28rpx;
    text-align: right;
    margin-left: 20rpx;
    height: 100%;
    font-weight: 500;
    background-color: #f5f5f5;
    padding: 0 18rpx;
  }
}

.modal-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;

  .bottom-but {
    width: 225rpx;
    height: 80rpx;
    border-radius: 47rpx;
    border: 2rpx solid #cecece;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15rpx;
  }

  .but-cel {
    font-size: 32rpx;
    font-weight: 400;
    color: #5a5d60;
  }

  .but-ok {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    border: 2rpx solid #ffffff;
    background: #3d8ce6;
  }
}

.top-right {
  position: absolute;
  right: 30rpx;
  top: 30rpx;

  .font-icon {
    font-size: 28rpx;
    color: #444444;
  }
}
</style>
